<template>
  <div id="app">
    <router-link to="/home">home</router-link>
    <router-link to="/news">news</router-link>
    <router-link to="/user/1">user1</router-link>
    <router-link to="/user/2">user2</router-link>
    <router-link to="/user/3">user3</router-link>
    <router-link to="/user/4">user4</router-link>
    <router-link to="/use12r/4">use12r</router-link>
    <router-link :to="{name:'ParentVm'}">ParentVm</router-link>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
  import ParentVm from './components/ParentVm';

  export default {
    name: 'App',
    data: function () {
      return {
        radio: '1',
      }
    },
    components: {
      ParentVm
    }
  }
</script>

<style>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    /*margin-top: 60px;*/
    width: 1080px;
    margin: 0 auto;
    border: 1px red dashed;
  }

</style>
